<!--
 * @Author: your name
 * @Date: 2021-07-08 12:46:10
 * @LastEditTime: 2021-11-11 15:59:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jinfeng_up\src\pages\systemSetting\column.vue
-->
<template>
  <div class="all">
    <div class="container">
      <div class="containerTop">
        <div class="containerTopName">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="grid-content bg-purple">配置设置</div>
            </el-col>
            <el-col :span="14" v-if="!isOpen && !isValue">
              <div class="grid-content bg-purple">一级选项</div>
            </el-col>
            <el-col :span="6" v-if="isOpen || isValue">
              <div class="grid-content bg-purple">一级选项</div>
            </el-col>
            <!-- <el-col :span="9" v-if="!isOpen && isValue">
              <div class="grid-content bg-purple">一级选项</div>
            </el-col> -->
            <el-col :span="3" v-if="isOpen && !isValue">
              <div class="grid-content bg-purple"><span>是否开启C2</span></div>
            </el-col>
            <el-col :span="5" v-if="isOpen && !isValue">
              <div class="grid-content bg-purple"><span >二级选项</span></div>
            </el-col>
            <el-col :span="8" v-if="!isOpen && isValue">
              <div class="grid-content bg-purple"><span >二级选项</span></div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <DataRefresh class="dataStatisticsButton" />
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="addData">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-select v-model="value" placeholder="请选择" :disabled="isInput">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="14" v-if="!isOpen && !isValue">
              <div class="grid-content bg-purple">
                <el-input v-model="configurationInput" :disabled="isInput" placeholder="请输入内容" class="maxInput"></el-input>
              </div>
            </el-col>
            <el-col :span="5" v-if="isOpen || isValue">
              <div class="grid-content bg-purple">
                <el-input v-model="configurationInput" :disabled="isInput" placeholder="请输入内容"></el-input>
              </div>
            </el-col>
            <el-col :span="3" :offset="1" v-if="isOpen && !isValue">
              <div class="grid-content bg-purple">
                <el-radio v-model="radio" label="1" :disabled="isInput" v-if="isOpen && !isValue">否</el-radio>
                <el-radio v-model="radio" label="2" :disabled="isInput" v-if="isOpen && !isValue">是</el-radio>
              </div>
            </el-col>
            <el-col :span="5" :offset="value == '0' ? 1 : 0" v-if="isOpen && !isValue">
              <div class="grid-content bg-purple">
                <el-input v-model="levelTwoInput" :disabled="isInput" placeholder="请输入内容" ></el-input>
              </div>
            </el-col>
            <el-col :span="8" :offset="value == '0' ? 1 : 0" v-if="!isOpen && isValue">
              <div class="grid-content bg-purple">
                <el-input v-model="levelTwoInput" :disabled="isInput" placeholder="请输入内容" ></el-input>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <div v-if="isEidt">
                  <el-button type="primary" @click.stop="setEidtFalse" class="buttonStyle">编辑</el-button>
                  <el-button type="primary" @click.stop="insertAsyn" class="buttonStyle">添加</el-button>
                </div>
                <div v-else>
                  <el-button type="primary" @click.stop="setEidtTrue" class="buttonStyle">保存</el-button>
                  <el-button type="primary" @click.stop="cancelAsyn" class="buttonStyle">取消</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="containerButtom">
        <div class="containerButtomList">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <div class="containerButtomListText">
                  <p>问题类型</p>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <div class="containerButtomListOne">
                  <div @click.stop="closeCatlogChnage(item)" v-for="(item, index) in MarketProject" :key="index">
                    <div>
                      <el-row :gutter="5">
                        <el-col :span="20"
                          ><div class="grid-content bg-purple">
                            <el-input :disabled="isEidt" v-model="item.name"></el-input></div
                        ></el-col>
                        <el-col :span="4"
                          ><div class="grid-content bg-purple">
                            <span v-if="isEidt === false" @click.stop="clickDelete(index, 'MarketProject')">x</span>
                          </div></el-col
                        >
                      </el-row>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>

            <el-col :span="6" :offset="value == '25' ? 3 : 0">
              <div class="grid-content bg-purple">
                <div class="containerButtomListThree">
                  <div v-for="(item, index) in MarketProjectChilds" :key="index">
                    <div>
                      <el-row :gutter="5">
                        <el-col :span="20"
                          ><div class="grid-content bg-purple">
                            <el-input :disabled="isEidt" v-model="item.name"></el-input></div
                        ></el-col>
                        <el-col :span="4"
                          ><div class="grid-content bg-purple">
                            <span v-if="isEidt === false" @click.stop="clickDelete(index, 'MarketProjectChilds')"
                              >x</span
                            >
                          </div></el-col
                        >
                      </el-row>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- <div class="containerButtomList">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <div class="containerButtomListText">
                  <p>问题小类</p>
                </div>
              </div>
            </el-col>
            <el-col :span="19">
              <div class="grid-content bg-purple">
                <div class="containerButtomListOne">
                  <div v-for="(item, index) in marketProjectsSmall"
                       :key="index">
                    <div>
                        <el-row :gutter="5">
  <el-col :span="20"><div class="grid-content bg-purple">
      <el-input :disabled="isEidt"
                                v-model="item.name"></el-input></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple">
      <span v-if="isEidt === false"
                            @click.stop="clickDelete(index, 'marketProjectsSmall')">x</span></div></el-col>
</el-row>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div> -->
        <div class="containerButtomList">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <div class="containerButtomListText">
                  <p>反馈来源</p>
                </div>
              </div>
            </el-col>
            <el-col :span="19">
              <div class="grid-content bg-purple">
                <div class="containerButtomListOne">
                  <div v-for="(item, index) in SourceFeedbackSets" :key="index">
                    <div>
                      <el-row :gutter="5">
                        <el-col :span="20"
                          ><div class="grid-content bg-purple">
                            <el-input :disabled="isEidt" v-model="item.title"></el-input></div
                        ></el-col>
                        <el-col :span="4"
                          ><div class="grid-content bg-purple">
                            <span v-if="isEidt === false" @click.stop="clickDelete(index, 'SourceFeedbackSets')"
                              >x</span
                            >
                          </div></el-col
                        >
                      </el-row>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="containerButtomList">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <div class="containerButtomListText">
                  <p>营销项目状态</p>
                </div>
              </div>
            </el-col>
            <el-col :span="19">
              <div class="grid-content bg-purple">
                <div class="containerButtomListOne">
                  <div v-for="(item, index) in ProblemTypeSets" :key="index">
                    <div>
                      <el-row :gutter="5">
                        <el-col :span="20"
                          ><div class="grid-content bg-purple">
                            <el-input :disabled="isEidt" v-model="item.title"></el-input></div
                        ></el-col>
                        <el-col :span="4"
                          ><div class="grid-content bg-purple">
                            <span v-if="isEidt === false" @click.stop="clickDelete(index, 'ProblemTypeSets')">x</span>
                          </div></el-col
                        >
                      </el-row>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="containerButtomList">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <div class="containerButtomListText">
                  <p>影响类别设置</p>
                </div>
              </div>
            </el-col>
            <el-col :span="19">
              <div class="grid-content bg-purple">
                <div class="containerButtomListOne">
                  <div v-for="(item, index) in impactCategorySets" :key="index">
                    <div>
                      <el-row :gutter="5">
                        <el-col :span="20"
                          ><div class="grid-content bg-purple">
                            <el-input :disabled="isEidt" v-model="item.title"></el-input></div
                        ></el-col>
                        <el-col :span="4"
                          ><div class="grid-content bg-purple">
                            <span v-if="isEidt === false" @click.stop="clickDelete(index, 'impactCategorySets')"
                              >x</span
                            >
                          </div></el-col
                        >
                      </el-row>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="containerButtomList">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <div class="containerButtomListText">
                  <p>任务关闭原因</p>
                </div>
              </div>
            </el-col>
            <el-col :span="19">
              <div class="grid-content bg-purple">
                <div class="containerButtomListOne">
                  <div v-for="(item, index) in taskCloseReason" :key="index">
                    <div>
                      <el-row :gutter="5">
                        <el-col :span="20"
                          ><div class="grid-content bg-purple">
                            <el-input :disabled="isEidt" v-model="item.title"></el-input></div
                        ></el-col>
                        <el-col :span="4"
                          ><div class="grid-content bg-purple">
                            <span v-if="isEidt === false" @click.stop="clickDelete(index, 'taskCloseReason')">x</span>
                          </div></el-col
                        >
                      </el-row>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="containerButtomList">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <div class="containerButtomListText">
                  <p>反馈关闭原因</p>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <div class="containerButtomListOne">
                  <div
                    v-for="(item, index) in feedBackCloseSet"
                    :key="index"
                    @click.stop="clickFeedBackCloseSet(index)"
                  >
                    <div>
                      <el-row :gutter="5">
                        <el-col :span="20"
                          ><div class="grid-content bg-purple">
                            <el-input :disabled="isEidt" v-model="item.text"></el-input></div
                        ></el-col>
                        <el-col :span="4"
                          ><div class="grid-content bg-purple">
                            <span
                              v-if="isEidt === false && item.id != '1437597267674632193'"
                              @click.stop="clickDelete(index, 'feedBackCloseSet')"
                              >x</span
                            >
                          </div></el-col
                        >
                      </el-row>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple">
                <el-radio-group v-model="isradio" :disabled="isEidt" @change="onChang()">
                  <el-radio label="false" style="margin-left: 10px">否</el-radio>
                  <el-radio label="true">是</el-radio>
                </el-radio-group>
              </div>
            </el-col>
            <el-col :span="10">
              <div class="grid-content bg-purple">
                <div class="containerButtomListThree">
                  <div v-for="(item, index) in feedBackCloseSetChilds" :key="index">
                    <div>
                      <el-row :gutter="5">
                        <el-col :span="20"
                          ><div class="grid-content bg-purple">
                            <el-input :disabled="isEidt" v-model="item.text"></el-input></div
                        ></el-col>
                        <el-col :span="4"
                          ><div class="grid-content bg-purple">
                            <span v-if="isEidt === false" @click.stop="clickDelete(index, 'feedBackCloseSetChilds')"
                              >x</span
                            >
                          </div></el-col
                        >
                      </el-row>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="containerButtomList">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <div class="containerButtomListText">
                  <p>营销项目名称</p>
                  <div class="importAndExport">
                   <div> <el-button type="primary" @click="onExport" class="buttonStyle">导出</el-button></div>
                    <div>
                        <el-upload
                      class="upload-demo"
                      :action="fileUpload"
                      :on-success="onFileSuccess"
                      :on-error="onFileError"
                      :on-remove="onFileRemove"
                      :before-upload="beforeUpload"
                      multiple
                      :limit="3"
                      :file-list="fileList"
                    >
                      <el-button size="small" type="primary" class="buttonStyle">导入</el-button>
                    </el-upload>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="19">
              <div class="grid-content bg-purple">
                <div class="containerButtomListOne">
                  <div v-for="(item, index) in marketProjectName" :key="index">
                    <div>
                      <el-row :gutter="5">
                        <el-col :span="20"
                          ><div class="grid-content bg-purple">
                            <el-input :disabled="isEidt" v-model="item.title"></el-input></div
                        ></el-col>
                        <el-col :span="4"
                          ><div class="grid-content bg-purple">
                            <span v-if="isEidt === false" @click.stop="clickDelete(index, 'marketProjectName')">x</span>
                          </div></el-col
                        >
                      </el-row>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <CommonDialog ref="CommonDialog" />
      <el-dialog title="数据导入" :visible.sync="isShowDialog" :close-on-click-modal="false" width="25%">
        <el-table
          ref="multipleTable"
          :data="gridData"
          tooltip-effect="dark"
          style="width: 100%;height: 430px;overflow-y: auto"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="营销项目名称">
            <template slot-scope="scope">{{ scope.row.marketProjectName }}</template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isShowDialog = false">取 消</el-button>
          <el-button type="primary" @click="onImport">导入</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Api from '@/api/setting/api.js'
import CommonDialog from '@/components/deleteDialog/deleteDialog.vue'
import { FormOptionSet } from '@/api/setting/service.js'
import DataRefresh from './dataRefresh.vue'
export default {
    components: {
        CommonDialog,
        DataRefresh
    },
    data() {
        return {
            // 配置选项绑定的value值
            isInput: false,
            value: '',
            // 数据导入成功弹出框
            isShowDialog: false,
            // 文件上传地址
            fileUpload: `${process.env.VUE_APP_BASE_API}${Api.FormOptionSetMarketingProjectParse}`,
            // 从本地选择文件成功的数据
            gridData: [],
            // 配置设置选项
            options: [
                {
                    value: '0',
                    label: '问题类型'
                },
                // {
                //     value: '5',
                //     label: '问题小类'
                // },
                {
                    value: '10',
                    label: '反馈来源'
                },
                {
                    value: '15',
                    label: '营销项目状态'
                },
                {
                    value: '20',
                    label: '影响类别设置'
                },
                {
                    value: '25',
                    label: '反馈关闭原因'
                },
                {
                    value: '30',
                    label: '任务关闭原因'
                },
                {
                    value: '35',
                    label: '营销项目名称'
                }
            ],
            // 绑定配置设置输入框
            configurationInput: '',
            // 绑定一级选项输入框
            levelOneInput: '',
            // 绑定二级选项输入框
            levelTwoInput: '',
            // 默认开启C2
            radio: '1',
            // 反馈关闭原因中是否开启C2
            isradio: 'false',
            // 反馈关闭原因一级选项索引值
            radioIndex: 0,
            // 判断是否是问题类型
            isValue: false,
            // 判断是否判断是否是反馈关闭原因
            isOpen: false,
            // 判断是否可以编辑
            isEidt: true,
            // 问题类型一级列表数据
            MarketProject: [],
            // 问题类型二级列表数据
            MarketProjectChilds: [],
            // 反馈来源列表数据
            SourceFeedbackSets: [],
            // 营销项目状态列表数据
            ProblemTypeSets: [],
            // 影响类别设置列表数据
            impactCategorySets: [],
            // 反馈关闭原因一级列表数据
            feedBackCloseSet: [],
            // 任务关闭原因列表数据
            taskCloseReason: [],
            // 反馈关闭原因二级列表数据
            feedBackCloseSetChilds: [],
            // 营销项目名称列表数据
            marketProjectName: [],
            // 需要导入的文件
            multipleTable: [],
            // 文件上传列表
            fileList: [],
            // 问题小类列表
            marketProjectsSmall: []

        }
    },
    watch: {
    /**
     * @description: 监听配置选项 判断是否渲染二级选项或者是否渲染单选设置
     * @param {Number} newName 配置选项的value值
     */
        value(newName, oldName) {
            if (newName !== oldName) {
                this.levelTwoInput = ''
                this.configurationInput = ''
            }
            if (newName === '0') {
                this.isOpen = false
                this.isValue = true
            } else if (newName === '25') {
                this.isOpen = true
                this.isValue = false
            } else {
                this.isValue = false
                this.isOpen = false
            }
        }
    },
    mounted() {
        this.getCategory()
    },
    methods: {
        closeCatlogChnage(index) {
            console.log(index)
            this.MarketProjectChilds = index.children
            this.radioIndex = index
        },
        /**
     * @description: 文件上传之前判断文件大小
     * @param {Object} _file 需要上传的文件
     */
        beforeUpload(_file) {
            // 单位字节
            const limitSize = 50 * 1024 * 1024
            if (_file.size > limitSize) {
                this.$message.error('上传文件大小超出50M')
                return false
            }
            return true
        },

        /**
     * @description: 文件上传成功事件
     * @param {Object} _response 上传成功的返回结果
     * @param {Object} _file 上传的文件
     * @param {Array} _fileList 文件列表
     */
        onFileSuccess(_response, _file, _fileList) {
            console.log(_response, _file, _fileList)
            if (_response.success) {
                this.gridData = _response.data
                this.isShowDialog = true
                this.fileList = []
            } else {
                this.fileList = []
                this.$message.error(_response.message || '上传失败')
            }
        },

        /**
     * @description: 文件上传失败事件
     */
        onFileError() {
            this.$message.error('上传失败')
        },

        /**
     * @description: 文件移除事件
     * @param {Object} _file 移除的文件
     * @param {Array} _fileList 剩余的文件列表
     * @return {*}
     */
        onFileRemove(_file, _fileList) {
            console.log(_file, _fileList)
        },

        /**
     * @description: 文件导入事件
     */
        async onImport() {
            try {
                const result = await FormOptionSet.FormOptionSetMarketingProjectImport(this.multipleTable)
                if (result.success) {
                    this.isShowDialog = false
                    this.getCategory()
                    this.$message.success(result.message)
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        },

        /**
     * @description: 文件导出事件
     */
        onExport() {
            FormOptionSet.FormOptionSetMarketingProjectExport()
        },

        /**
     * @description: 需要导出的文件
     * @param {Array} _val 所勾选的需要导出的文件
     */
        handleSelectionChange(_val) {
            this.multipleTable = _val
        },
        cancelAsyn() {
            this.isEidt = true
            this.isInput = false
            this.getCategory()
        },

        /**
     * @description: 异步编辑表单选项列表
     */
        async setEidtTrue() {
            const loading = this.$loading({
                lock: true,
                text: '数据加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            const arr = {
                feedBackCloseSet: this.feedBackCloseSet,
                impactCategorySets: this.impactCategorySets,
                marketProjectName: this.marketProjectName,
                marketProjects: this.MarketProject,
                problemTypeSets: this.ProblemTypeSets,
                sourceFeedbackSets: this.SourceFeedbackSets,
                taskCloseReason: this.taskCloseReason,
                marketProjectsSmall: this.marketProjectsSmall
            }
            try {
                const result = await FormOptionSet.FormOptionSetSaveAsync(arr)
                if (result.success) {
                    this.isEidt = true
                    this.isInput = false
                    loading.close()
                    this.getCategory()
                    this.$message.success(result.message)
                } else {
                    this.getCategory()
                    loading.close()
                    this.isInput = false
                    this.isEidt = true
                    this.$message.error(result.message)
                }
            } catch (err) {
                loading.close()
                this.isInput = false
                this.getCategory()
                this.isEidt = true
                this.$message.error('服务器异常')
            }
        },
        /**
     * @description: 点击编辑按钮
     */

        setEidtFalse() {
            this.isEidt = false
            this.isInput = true
        },

        /**
     * @description: 修改是否开启C2
     */
        onChang() {
            this.feedBackCloseSet[this.radioIndex].val = this.isradio
        },

        /**
     * @description: 异步获取表单选项列表
     */
        async getCategory() {
            try {
                const result = await FormOptionSet.FormOptionSetGetAllAsync()
                if (result.success) {
                    this.buildTemplateData(result.data)
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        },
        /**
     * @description:将后端返回的数据进行重构
     * @param {Array} _data 后端返回的数据
     */
        buildTemplateData(_data) {
            this.feedBackCloseSet = _data.feedBackCloseSet
            if (_data.feedBackCloseSet.length != 0) {
                this.feedBackCloseSetChilds = _data.feedBackCloseSet[0].children
                this.isradio = _data.feedBackCloseSet[0].val
                this.radioIndex = 0
            }
            this.impactCategorySets = _data.impactCategorySets
            this.marketProjectName = _data.marketProjectName
            this.MarketProject = _data.marketProjects
            if (_data.marketProjects.length != 0) {
                if (_data.marketProjects[0].children) {
                    this.MarketProjectChilds = _data.marketProjects[0].children
                }
            }

            this.marketProjectsSmall = _data.marketProjectsSmall
            this.ProblemTypeSets = _data.problemTypeSets
            this.SourceFeedbackSets = _data.sourceFeedbackSets
            this.taskCloseReason = _data.taskCloseReason
        },

        /**
     * @description:点击反馈关闭原因某一个 显示他的二级选项
     * @param {Number} index 反馈关闭原因中一级选项的索引
     */
        clickFeedBackCloseSet(index) {
            this.feedBackCloseSetChilds = this.feedBackCloseSet[index].children
            this.isradio = this.feedBackCloseSet[index].val
            this.radioIndex = index
        },

        /**
     * @description:异步添加表单选项设置
     */
        async insertAsyn() {
            let arr = {}
            if (this.value === '') {
                this.$message.error('未选择配置选项')
            } else if (this.configurationInput === '') {
                this.$message.error('未填写一级选项')
            } else if ((this.levelTwoInput === '' || this.configurationInput === '') && (this.value === '0' || this.value === '25')) {
                this.$message.error('未填写一级或二级选项')
            } else {
                if (this.value === '0') {
                    arr = {
                        firstStatus: {
                            marketProjectType: '0',
                            name: this.configurationInput
                        },
                        optionType: '0',
                        secondStatus: {
                            marketProjectType: '1',
                            name: this.levelTwoInput
                        }
                    }
                } else if (this.value === '5') {
                    arr = {
                        firstStatus: {
                            marketProjectType: '0',
                            name: this.configurationInput
                        },
                        optionType: '7',
                        secondStatus: null
                    }
                } else if (this.value === '10') {
                    arr = {
                        firstStatus: {
                            marketProjectType: '0',
                            name: this.configurationInput
                        },
                        optionType: '1',
                        secondStatus: null
                    }
                } else if (this.value === '15') {
                    arr = {
                        firstStatus: {
                            marketProjectType: '0',
                            name: this.configurationInput
                        },
                        optionType: '2',
                        secondStatus: null
                    }
                } else if (this.value === '20') {
                    arr = {
                        firstStatus: {
                            marketProjectType: '0',
                            name: this.configurationInput
                        },
                        optionType: '3',
                        secondStatus: null
                    }
                } else if (this.value === '30') {
                    arr = {
                        firstStatus: {
                            marketProjectType: '0',
                            name: this.configurationInput
                        },
                        optionType: '5',
                        secondStatus: null
                    }
                } else if (this.value === '25') {
                    let RunC2
                    if (this.radio === '1') {
                        RunC2 = false
                    } else {
                        RunC2 = true
                    }
                    if (this.levelTwoInput != '') {
                        arr = {
                            firstStatus: {
                                marketProjectType: '0',
                                name: this.configurationInput,
                                runC2Tag: RunC2
                            },
                            optionType: '4',
                            secondStatus: {
                                marketProjectType: '1',
                                name: this.levelTwoInput,
                                runC2Tag: RunC2
                            }
                        }
                    } else {
                        arr = {
                            firstStatus: {
                                marketProjectType: '0',
                                name: this.configurationInput,
                                runC2Tag: RunC2
                            },
                            optionType: '4',
                            secondStatus: null
                        }
                    }
                } else if (this.value === '35') {
                    arr = {
                        firstStatus: {
                            name: this.configurationInput
                        },
                        optionType: '6'
                    }
                }
                try {
                    const result = await FormOptionSet.FormOptionSetInsertAsync(arr)
                    if (result.success) {
                        this.configurationInput = ''
                        this.levelOneInput = ''
                        this.levelTwoInput = ''
                        this.radio = '1'
                        this.getCategory()
                        this.$message.success(result.message)
                    } else {
                        this.$message.error(result.message)
                    }
                } catch (err) {
                    this.$message.error('服务器异常')
                }
            }
        },

        /**
     * @description:删除一条数据
     * @param {Number} _index 确定删除的是那一条
     * @param {String} _type 确定删除的是那一条数据里面
     */
        async clickDelete(_index, _type) {
            this[_type].splice(_index, 1)
        }
    }
}
</script>
<style lang="less" scoped src="@/assets/style/setting.less"></style>
<style lang="less" scoped>
.container {
  margin: 30px;
  background: #ffffff;
  border: 1px solid #dcdfe4;
  box-shadow: 0px 2px 5px 0px rgba(152, 160, 179, 0.2);
  border-radius: 5px;
  padding: 30px;
  .containerTop {
    width: 100%;
    .containerTopName {
      height: 40px;
      border-bottom: 1px solid #c8cdd5;
      p {
        display: inline-block;
      }
      .dataStatisticsButton {
        float: right;
        margin-right: 10px;
      }
    }
    .addData {
      line-height: 50px;
      border-bottom: 1px solid #c8cdd5;
      padding: 10px 0;
    }
  }
  .containerButtom {
    height: 675px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0;
    .containerButtomList {
      height: 180px;
      line-height: 30px;
      padding: 10px 0;
      position: relative;
      border-bottom: 1px solid #c8cdd5;
      .containerButtomListText {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .el-input {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      span:hover {
        cursor: pointer;
      }
      .containerButtomListOne {
        border: 1px solid rgb(228, 228, 228);
        width: 100%;
        max-width: 320px;
        height: 160px;
        padding: 10px 5px;
        overflow-y: auto;
      }
      .containerButtomListTwo {
        border: 1px solid rgb(228, 228, 228);
        width: 100%;
        max-width: 320px;
        height: 160px;
        padding: 10px 5px;
        overflow-y: auto;
      }
      .containerButtomListThree {
        border: 1px solid rgb(228, 228, 228);
        width: 100%;
        max-width: 320px;
        height: 160px;
        padding: 10px 5px;
        overflow-y: auto;
      }
    }
  }
}
.importAndExport {
  margin-top: 85px;
  div{
      width: 80px;
      float: left;
  }
}
.buttonStyle {
  width: 70px;
  height: 30px;
  background: #eaf2ff;
  border: 1px solid #3579e0;
  border-radius: 5px;
  color: #3579e0;
  line-height: 8px;
}
.el-input {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 320px;
}
.el-button {
  float: right;
  margin-right: 10px;
  margin-top: 10px;
}
::v-deep .el-dialog__footer {
  height: 60px !important;
}
::v-deep .el-select--small {
  height: 55px;
}
.maxInput {
  max-width: 320px;
}
</style>
